<template>
  <div class="info">
    <el-row>
      <el-col :span="3" style="text-align: right">
        <el-icon>
          <CircleCheck/>
        </el-icon>
      </el-col>
      <el-col :span="16">
        <div style="line-height: 52px">订单提交成功！快去付款叭</div>
        <div style=" line-height: 52px">请在15分钟内完成付款,超时订单会自动取消</div>
      </el-col>
      <el-col :span="5" style="line-height: 104px;text-align: right">应付总额
        <span style="line-height: 104px" class="total">{{ total.toFixed(2) }}RMB</span>
      </el-col>
    </el-row>
    <div>
      <el-collapse>
        <el-collapse-item title="订单详情1.1" name="1">
          <el-row>
            <el-col :span="4">订单号：</el-col>
            <el-col :span="10">{{ order.id }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="4">收获信息：</el-col>
            <el-col :span="10">{{ order.addrDetail }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="4">商品名称：</el-col>
            <el-col :span="10">
              <div v-for="(orderDetail,index) in order.orderDetailList" :key="index">
                {{ orderDetail.goods.name }}--{{ orderDetail.goods.color }}--{{ orderDetail.goods.version }}
              </div>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
  <div class="pay">
<!--    <div>-->
<!--      <div class="total">支付工具</div>-->
<!--      <ul>-->
<!--        <li>余额</li>-->
<!--        <li>AliPay</li>-->
<!--        <li>WChart</li>-->
<!--        <li>BankCard</li>-->
<!--      </ul>-->
<!--    </div>-->
    <div>
      <el-input type="password"
                placeholder="在这输入支付密码0.0"
                v-model="payPassword"
                style="margin: 10px;width: 200px"></el-input>
      <el-button type="danger" size="large" @click="pay">余额支付</el-button>
      <el-button type="danger" size="large" @click="pay1">支付宝支付</el-button>
    </div>
  </div>
</template>

<script setup>
//根据订单id查询相关信息
import {useRoute} from "vue-router";
import orderApi from "@/api/orderApi.js";
import {ref} from "vue";
import {CircleCheck} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
const router=useRouter()
const route = useRoute()
//保存订单的信息
const order = ref({})
//总金额
const total = ref(0)
//支付密码
const payPassword = ref("")

//支付
function pay() {
  orderApi.pay({
    orderId: route.query.orderId,
    payPassword: payPassword.value
  }).then(resp => {
    if (resp.code===10000){
      //跳转到订单的详情页
      router.push("/user/orderList")
    }else {
      ElMessage.error(resp.msg)
    }
  })
}
function pay1() {
  window.open(
      "http://127.0.0.1:8093/alipay/pay?traceNo=" + Math.floor(Math.random() * 900000) + 100000 +
      "&totalAmount=" + total.value,
      '_self'
  );
  orderApi.pay1({
    orderId: route.query.orderId,
  })
}

function getOrder() {
  //获取路径上的订单id
  const orderId = route.query.orderId
  console.log(route.query.orderId)
  // 根据订单的id查询相关的信息  地址信息  商品信息
  orderApi.selectById(orderId)
      .then(resp => {
        console.log(resp.data)
        order.value = resp.data
        for (let orderDetail of order.value.orderDetailList) {
          total.value += orderDetail.count * orderDetail.goods.price;
        }
      })
}

getOrder()
</script>

<style scoped>
.info {
  margin-top: 30px;
  background-color: #FFFFFF;
  padding: 30px;
}

.info .el-icon {
  font-size: 100px;
  color: rgb(131, 196, 78);
}

.info .total {
  font-size: 18px;
  font-weight: bold;
  color: var(--theme-color);
}

.pay .total {
  font-size: 18px;
  font-weight: bold;
}

.pay ul li {
  margin: 10px;
  padding: 0 10px;
  float: left;
  border: 1px solid black;
  height: 40px;
  line-height: 40px;
}
</style>